<template>
  <t-item class="drawer-item" :class="classes">
    <t-item-section class="icon"
      ><t-icon :name="icon" size="18px"
    /></t-item-section>
    <t-item-section class="text" extend>{{ text }}</t-item-section>
    <t-item-section class="btns"><slot></slot></t-item-section>
  </t-item>
</template>
<script>
export default {
  name: "DrawerItem",
  props: {
    icon: String,
    text: String,
    selected: Boolean
  },
  computed: {
    classes() {
      const classes = [];
      if (this.selected) classes.push("selected");
      return classes;
    }
  }
};
</script>
<style lang="less">
.drawer-item {
  font-size: 14px;
  line-height: 18px;
  padding: 2px 0;
  border-radius: 3px;
  &.selected {
    background-color: #dde1e6;
  }
  .icon {
    margin: 0 4px;
    width: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text {
    display: flex;
    align-items: center;
  }
  .btns {
    flex: 0;
    display: flex;
    align-items: center;
    padding-right: 4px;
  }
}
</style>
